<template>
  <div class="ie-page" ref="pageRef">

    <n-spin :show="props.loading">

      <a-affix
        :offset-top="props.isFixed ? .1 : 0"
        :target="pageRef"
      >

        <n-page-header
          :class="['ie-page-header', {
            'is-fixed': props.isFixed
          }]"
          @back="handleBack"
        >

          <slot name="header"></slot>

          <template #header>
            <n-breadcrumb>
              <n-breadcrumb-item :key="indexRoute.path">
                <router-link :to="indexRoute.path">{{ indexRoute.meta.title }}</router-link>
              </n-breadcrumb-item>
              <template v-if="$route.meta.breadcrumb">
                <n-breadcrumb-item v-for="item in $route.meta.breadcrumb" :key="item.to">
                  <router-link :to="item.to">{{ item.title }}</router-link>
                </n-breadcrumb-item>
              </template>
            </n-breadcrumb>
          </template>

          <template #title>
            <slot v-if="slots.title" name="title"></slot>
            <span v-else-if="pageHeaderTitle">{{ pageHeaderTitle }}</span>
          </template>

          <template v-if="slots.extra" #extra>
            <slot name="extra"></slot>
          </template>

        </n-page-header>

      </a-affix>

      <div class="ie-page-body">
        <slot></slot>
      </div>

    </n-spin>

  </div>
</template>

<script setup>
import { onMounted, ref, useSlots, computed } from 'vue'
import {
  NBreadcrumb,
  NBreadcrumbItem,
  NPageHeader,
  useLoadingBar
} from 'naive-ui'
import { useRoute, useRouter } from 'vue-router'
import { loadingBarApiRef, indexRoute } from '/@/router'

const props = defineProps({
  onBack: Function,
  isFixed: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const route = useRoute()
const router = useRouter()
const slots = useSlots()

const pageRef = ref()
const pageHeaderTitle = computed(() => {
  if (route.meta.title) return route.meta.title
  if (Array.isArray(route.meta.breadcrumb)) {
    const [currentRoute] = route.meta.breadcrumb.slice(-1)
    const { title } = currentRoute

    if (title) return title
  }
})

function handleBack() {
  if (typeof props.onBack === 'function') {
    return props.onBack()
  }

  router.back()
}

const loading = ref(true)
const loadingBar = useLoadingBar()

// loadingBar.start()

onMounted(() => {
  loading.value = false
  loadingBarApiRef.value = loadingBar
  loadingBar.finish()
})
</script>

<style lang="less">
.ie-page-header {
  background-color: #fff;
  padding: 24px;

  &.is-fixed {
    border-bottom: solid 1px rgb(239, 239, 245);
  }

  .n-page-header__main {
    height: 34px;
  }

  .n-breadcrumb-item__link a {
    color: var(--item-text-color);
    text-decoration: none;
  }

  .n-breadcrumb .n-breadcrumb-item:hover {

    .n-breadcrumb-item__link a {
      color: var(--item-text-color-hover);
    }
  }

  .n-breadcrumb .n-breadcrumb-item:last-child {

    .n-breadcrumb-item__link a {
      font-weight: var(--font-weight-active);
      cursor: unset;
      color: var(--item-text-color-active);
    }
  }
}

.ie-page-body {
  padding: 24px;

  .ie-table,
  .ie-table-query {
    padding: 24px;
    background-color: #fff;
  }

  .n-spin-content > .n-empty {
    margin-top: 10vh;
  }
}

.ie-page {

  .n-page-header__title {

    .n-tag {
      vertical-align: text-bottom;
      margin-left: 12px;
    }
  }

  .n-page-header-content {
    margin-top: 0;
  }

  .ie-page-form {
    background-color: #fff;
    padding: 32px 24px;

    .n-form {
      margin: 0 auto;
      max-width: 960px;
      padding-right: 90px;
    }
  }

  & > .n-spin-container {
    height: 100%;

    .n-spin-content {
      height: 100%;
    }
  }
}
</style>
